import React from "react";
import ColorBox from "../ColorBox";
import "./index.css";
import Blank from "../Blank";
import V from "../V";
import MsgNumber from "../MsgNumber";
import UserServer from "../../Server/User";
import UserCheck from "../../utils/UserCheck";
import HttpUtil from "../../utils/HttpUtil";

export default class UserInfoHeader extends React.Component{
    constructor(props){
        super();
        this.state={
            src:"",
            desc:props.desc,
            username:props.username,
            userIntegral:props.number,
            isSetting:props.isSetting,
            userBalance:0,
            forgetPswVisible:false,
        }
        UserServer.SelectUserInformation(UserCheck.GetUserID())
        .then(response=>{
            // console.log(response);
            let userHeader=HttpUtil.GetResourceURL(response.data.userHeadUrl);
            // console.log(userHeader);
            
            this.setState({
                username:response.data.userName,
                userBalance:response.data.userBalance,
                desc:response.data.userSignature,
                userIntegral:response.data.userIntegral,
                src:userHeader,
                phone:response.data.userPhone
            });
            // src:"/assets/Tmp/userLogo_tmp.png" 

            // console.log(response);
        });

    }
    
    ShowChangePsw(e){
        var data = {
            name: 'ChangePsw',
          }
          window.parent.postMessage(data,'*'); //window.postMessage
    }
    render(){
        let setting=[];
        if(!this.state.isSetting){
            setting.push(<V/>);
            setting.push(<span className="UserInfoHeader_V">派等级></span>);
        }
        else{
            setting.push(<span className="UserInfoHeader_V" onClick={e=>this.ShowChangePsw(e)}>修改密码</span>);
        }

        return (
            <div>
                <div className="UserInfoHeader">
                    <span className="UserInfoHeader_Left"><img src={this.state.src} alt="userlogo" className="UserInfoHeader_Portrait"/></span>
                    <span  className="UserInfoHeader_Right">
                        <div style={{display:"flex"}}>
                            <span className="UserInfoHeaderTitle">{this.state.username} </span><Blank/> 
                            {setting}
                        </div>
                        <div className="UserInfoHeaderDesc">{this.state.desc}</div>
                        <div className="UserInfoHeader_Number"><ColorBox color="#FE5710" text="积分"/> {this.state.userIntegral}</div>
                    </span>
                    <div style={{display:"flex",justifyContent:"space-between"}} className="UserInfoHeader_MsgNumber">
                        <MsgNumber  title="未读消息" number="72" />
                        <MsgNumber title="优惠券" number="3" />
                        <MsgNumber title="余额" number={this.state.userBalance} />
                    </div>
                    <hr className="UserInfoHeader_HR"/>
                </div>
            </div>
        )
    }
}